<template>
  <div v-if="show">
    <mavon-editor
      :class="bindClass ? 'md' : ''"
      v-model="content"
      :toolbars="toolbars">
    </mavon-editor>
    <slot name="btn-group"></slot>
  </div>
  
</template>

<script>
export default {
  props:{
    show:{
      type: Boolean,
      default: false
    },
    bindClass:{
      type: Boolean,
      default: false
    }
  },
  data(){
    return{
      content:"",
      toolbars:{
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        mark: true, // 标记
        superscript: true, // 上角标
        quote: true, // 引用
        ol: true, // 有序列表
        link: true, // 链接
        // imagelink: true, //图片链接
        help: true, // 帮助
        code: true, // code
        subfield: true, // 是否需要分栏
        readmodel: true, // 沉浸式阅读
        undo: true, // 上一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        navigation: true // 导航目录
       }
    }
  }
}
</script>

<style lang="scss" scoped>
  .md{
    width: 1000px;
    height: 500px;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
  }
</style>